<template>
  <div id="login_back" :style="{backgroundImage:'url('+background_image+')'}">
    <div id="from_back">
      <div id="from">
        <div align="center">
          <p style="font-size:30px;padding:10px;color:#909399">{{adress_data.title}}</p>
          <p style="font-size:15px;padding:5px;color:#C0C4CC">{{adress_data.adress}}</p>
        </div>
        <el-form
          ref="form"
          :model="form"
          label-width="70px"
          size="small"
          label-position="left"
          style="padding: 10px;"
        >
          <el-form-item label="用户名">
            <el-input v-model="form.user_name" placeholder="请输入用户名"></el-input>
          </el-form-item>
          <el-form-item label="密码">
            <el-input v-model="form.user_password" show-password placeholder="请输入密码"></el-input>
          </el-form-item>
          <el-form-item label="记住登录">
            <el-checkbox v-model="form.login_status" placeholder="请输入密码"></el-checkbox>
          </el-form-item>
          <el-button type="primary" @click="onSubmit" style="width:100%">登录</el-button>
        </el-form>
        <div align="right" style="padding: 10px;">
          <el-button type="text" @click="$router.push('/register')">注册</el-button>
          <el-button type="text" @click="$router.push('/forget')">找回密码</el-button>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
//这是整个项目中最重要的部分，你必须得看懂，同时要看懂/unitui/init_route.js中的内容
import init_route from "/src/unitui/init_route.js";//动态路由添加js文件，你可以前往进行修改
import login_back_image from "../assets/login_back_image.jpg"
import route_data from "/src/unitui/assets/json/route.json"
import menu_data from "/src/unitui/assets/json/menu.json"
export default {
  data() {
    return {
      background_image: login_back_image, //登录页面组件背景图
      adress_data: {
        //登录头部信息
        title: "登录", //标题
        adress: "欢迎登录unit-ui" //简介
      },
      form: {
        //登录表单信息
        user_name: "unitui", //用户名
        user_password: "123456", //用户密码
        login_status: false //登录状态
      },
      route_data: route_data, //路由json数据，模拟后端返回的json，后端返回数据可以与json文件内容相同
      menu_data: menu_data //菜单数组,模拟后端返回的json，后端返回数据可以与json文件内容相同
    };
  },
  methods: {
    onSubmit() {
      //点击登录时触发
      sessionStorage.setItem("route_data", JSON.stringify(this.route_data)); //储存路由数组信息，如果你不适用sessionStorage储存路由信息，则路由初始化会失败，你也可以在这储存后端返回的路由json
      sessionStorage.setItem("menu_data", JSON.stringify(this.menu_data)); //储存菜单信息，用于生成框架内左侧菜单信息
      init_route.init_route();//调用初始化路由功能，依据sessionStorage.getItem("route_data")的信息动态添加路由，要看懂/unitui/init_route.js中的内容
      this.$message.success("登录成功，即将为您跳转");
      setTimeout(() => {
        this.$router.push("/sub/admin"); //执行路由跳转，默认跳转组件管理
      }, 1500);
    }
  },
  mounted() {
  }
};
</script>
<style scoped>
#login_back {
  width: 100%;
  height: 100vh;
  background-size: cover;
  position: relative;
}
#from_back {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  width: 400px;
  height: 350px;
  background: rgba(255, 255, 255, 0);
}
#from {
  width: 100%;
  height: 100%;
  margin-left: 25px;
  background-color: #ffffff;
  padding: 10px;
}
</style>